<template>
  <div id="app">
    <!-- <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/> -->
    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="180px">
          <el-tree
            :data="data"
            :props="defaultProps"
            @node-click="handleNodeClick"
          ></el-tree>
        </el-aside>
        <el-container>
          <el-main><router-view /></el-main>
          <el-footer>Footer</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>
<script>

export default {
  data() {
    return {
      data: [],
      msg: "bbb",
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  // vue里的生命周期 页面加载时进行 类似于外部的初始化异步
  created: function () {
    var _this = this;
    //页面初始化时，加载的方法
    this.$http
      .get("/system/api/menu/selectMenuTree")
      .then((response) => {
       console.log(response.data);
        _this.data = response.data.data;
      });
    // 初始化路由
    this.$http
      .get("http://localhost:9999/prs/menu/queryUrlNotNull")
      .then((response) => {
        var menuList = response.data.data;
        var route = [];
        if (menuList != null) {
          for (let index = 0; index < menuList.length; index++) {
            const menu = menuList[index];
            route.push({
              path: menu.url,
              name: menu.menuName,
              component: () => import("@/views" + menu.url + ".vue"),
            });
          }
        }
        //console.log(route);
        //console.log(JSON.stringify(route));
        _this.$router.addRoutes(route);
      });
  },
  methods: {
    handleNodeClick(data) {
      if (
        data.url != null &&
        data.url != "" &&
        data.url != undefined &&
        data.url != "null"
      ) {
        console.log(data);
        this.$router.push({ path: data.url });
      }
    },
  },
};
</script>
<style>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

/* #app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
} */
</style>
